<template>
    <ul class="video-datas">
        <li class="fav-d-item create-btn" v-if="myself && isworklist" @click="toPublish('')">
            <a>
                <span class="plus-icon"></span>
                <span class="text">发布</span>
            </a>
        </li>
        <a class="fav-d-item" v-for="(item, i) in list" :key="i" @click="currentItem=item;showPlay=true">
            <div class="img-flex-box">
                <div class="main-img">
                    <img loading="lazy" :src="item.image" alt="" />
                    <i class="play-icon"></i>

                    <div class="ops" v-if="myself&&isworklist">
                        <a class="i-del" title="删除" @click.stop="id = item.id; showDelConfirm = true;"></a>
                        <a class="i-edit" title="编辑" target="_blank" @click.stop="toPublish(item.id)"></a>
                    </div>
                </div>

                <!-- <div class="hid-el author">
                    <div class="ar-tit">暗夜突围-腾讯自中成起1908页</div>
                    <div class="u-box">
                    <img loading="lazy" class="avatar" src="https://image.gameuiux.cn/2022/09/30/1664467790270u=614515080,2288269124&fm=224&app=112&f=JPEG.jpg" alt="" />
                    <span class="name">欢喜冤家</span>
                    </div>
                </div>
                <a class="hid-el at-btn" v-if="i < 4">关注</a>
                <a class="hid-el ated-btn" v-else>已关注</a>
                <a class="hid-el edit-btn"></a> -->
            </div>
            <div class="bot-desc">
                <span class="file-name">{{ item.title }}</span>
                <!-- <span class="zan-num">{{item.praise}}</span> -->
                <span class="type-text">短视频</span>
            </div>
            <div class="bot-author">
                <div class="u">
                    <span class="img-box">
                        <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                    </span>
                    <span class="name">{{ item.member.userName }}</span>
                </div>
                <span class="like-num">88</span>
            </div>
        </a>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                    <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
                </div>
            </div>
        </a-modal>
        <!-- <div v-if="showDelConfirm">
            <div class="fav-component" style="width:366px;">
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定要删除？
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="showDelConfirm = false">取消</a>
                    <a class="pro-confirm-btn" @click="handleConfirmDel">确认</a>
                </div>
            </div>
            <div class="modal-mask" @click="showDelConfirm = false">

            </div>
        </div> -->
        
    <PlayVideo v-if="showPlay" :data="currentItem" @close="showPlay=false"/>
    </ul>
</template>

<script>
import PlayVideo from '@/components/playvideo'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
export default {
    data() {
        return {
            showPlay:false,
            currentItem:{},
            showDelConfirm: false,
            list: [],
            hasMore: true,
            params: {
                pageNum: 1,
                pageSize: 10,
                title: ''
            }
        }
    },
    components: {PlayVideo},
    props: ['myself','isworklist'],
    methods: {
        async handleConfirmDel() {
            let res = await api.delShortVideo(this.id);
            if (res.code == 0) {
                this.showDelConfirm = false;
                this.$amessage.success('删除成功');
                this.list = [];
                this.$parent.scrollLoaded = true;
                this.params.pageNum = 1;
                this.queryList();
            }
        },
        toPublish(_id) {
            this.$router.push({ path: '/publish/publishVideo' + (_id ? '/' + _id : '') })
        },
        onImgError(e) {
            e.target.src = require('../../../assets/pro/default_uimg.svg');
            e.target.srcset = require('../../../assets/pro/default_uimg.svg');
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        loadNext() {
            this.params.pageNum++;
            this.queryList();
        },
        async queryList() {
            let res = {};
            if(this.isworklist&&this.myself){
                let params=Object.assign({},this.params);
                if(!this.myself){
                    params.userId=localStorage.getItem('userId');
                    res=await api.videoList(params);
                }
                else{
                    res=await api.shortVideoList(params);
                }
            }else{
                let params=Object.assign({},this.params);
                params.type=2;
                if(!this.myself){
                    params.currentUserId=this.$route.params.id;
                }
                res=await api.myLikeList(params);
            }
            this.list = [...this.list, ...res.data];

            let totalPage = res.total % this.params.pageSize == 0 ? res.total / this.params.pageSize : parseInt(res.total / this.params.pageSize) + 1
            if (res.data && (res.data.length < this.params.pageSize || this.params.pageNum >= totalPage)) {
                this.hasMore = false
            } else {
                this.hasMore = true
            }
        },
        handleSearch() {
            this.hasMore = true;
            this.params.pageNum = 1;
            this.list = [];
            this.queryList();
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        }
    },
    mounted() {
        this.list = [];
        this.hasMore = true;
        this.params.pageNum = 1;
        this.queryList();
    }
}
</script>

<style scoped lang="less">
.video-datas {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .fav-d-item {
        // width: 312px;
        width: calc((100% - 80px) / 5);
        height: 290px;
        // margin-right: 20px;
        // margin-bottom: 20px;
        background: #171717;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        color: #fff;
        border: 2px solid transparent;
        transition: .1s all linear;
        animation: opacity .2s linear;

        &:hover {
            border-color:  #11CCB1;

            .img-flex-box {
                img {
                    transform: scale(1.08);
                }
            }

            .img-flex-box .main-img .ops {
                display: flex;
            }
        }
        &.create-btn {
            border: 2px dashed #424242;
            border-radius: 16px;
            transition: 0.1s all linear;

            a {
                // display: inline-block;
                width: 100%;
                height: 100%;
                // text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .plus-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 40px;
                    background-color: #29272f;
                    display: block;
                    text-align: center;
                    line-height: 40px;
                    margin-bottom:12px;
                    // margin: 91px auto 18px auto;
                    background-image: url('../../../assets/pro/list_create_plusico.svg');
                    background-repeat: no-repeat;
                    background-size: 40px 40px;
                }

                .text {
                    font-size: 14px;
                    color: #fff;
                    font-weight: 500;
                }
            }

            &:hover {
                border-color: #fff;
            }
        }

        .img-flex-box {
            display: flex;
            align-items: center;
            position: relative;
            height: 210px;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            overflow: hidden;
            .lt-img {
                width: 204px;
                height: 210px;
                margin-right: 6px;
                border-radius: 16px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .rt-img {
                .next-img {
                    width: 102px;
                    height: 102px;
                    margin-bottom: 6px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .last-img {
                    width: 102px;
                    height: 102px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .main-img {
                height: 210px;
                width: 100%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                position: relative;

                .play-icon {
                    width: 80px;
                    height: 80px;
                    background: url('../../../assets/pro/uc_v_icon_play.png') no-repeat;
                    left: 0px;
                    right: 0px;
                    top: 0px;
                    background-position: center center;
                    background-size: cover;
                    display: inline-block;
                    left: calc((100% - 80px) / 2);
                    top: calc((100% - 80px) / 2);
                    position: absolute;
                }

                .ops {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    display: none;
                    transition: .2s all linear;

                    a {
                        border-radius: 12px;
                        background: #FFFFFF;
                        width: 40px;
                        height: 40px;
                        transition: .2s all linear;

                        &:hover {
                            // opacity:.9;
                            background-color: #e1e1e1;
                        }
                    }

                    .i-del {
                        background-image: url('../../../assets/pro/i_del.png');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                        background-position: center;
                        margin-right: 10px;
                    }

                    .i-edit {
                        background-image: url('../../../assets/pro/i_edit.png');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }
            }

            .author {
                position: absolute;
                bottom: 10px;
                left: 9px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 12px;
                padding: 10px 13px;
                transition: 0.1s all linear;
                width: 164px;
                cursor: pointer;

                &:hover {
                    background: rgba(255, 255, 255, 1);
                }

                .ar-tit {
                    font-size: 14px;
                    font-weight: 500;
                    color: #383737;
                    line-height: 20px;
                    margin-bottom: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    background: url('../../../assets/pro/take_tit_icon.svg') no-repeat;
                    background-position: left center;
                    padding-left: 22px;
                }

                .u-box {
                    display: flex;
                    padding-left: 20px;

                    .name {
                        font-size: 14px;
                        color: #969696;
                        font-weight: 500;
                    }

                    .avatar {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        margin-right: 7px;
                    }
                }
            }

            .at-btn {
                color: #fff;
                font-size: 14px;
                background-color: #11CCB1;
                border-radius: 12px;
                line-height: 44px;
                background-image: url('../../../assets/pro/un_follow_ico.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                // width:82px;
                padding-left: 35px;
                padding-right: 19px;
                text-align: center;
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .ated-btn {
                color: #383737;
                font-size: 14px;
                background-color: #fff;
                border-radius: 12px;
                line-height: 44px;
                background-image: url('../../../assets/pro/cancel_follow_ico.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                // width:82px;
                padding-left: 35px;
                padding-right: 19px;
                text-align: center;
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .edit-btn {
                color: #383737;
                font-size: 14px;
                background-color: #fff;
                border-radius: 12px;
                line-height: 44px;
                width: 40px;
                height: 40px;
                text-align: center;
                position: absolute;
                right: 10px;
                top: 10px;
                background-image: url('../../../assets/pro/edit_ico.svg');
                background-repeat: no-repeat;
                background-position: center center;
            }

            .hid-el {
                // display: none;
                transition: .1s all linear;
                opacity: 0;
            }

            &:hover {
                .hid-el {
                    // display: inline-block;
                    opacity: 1;
                }
            }
        }

        .bot-desc {
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            margin-top: 14px;
            align-items: center;
            padding-right: 16px;

            .file-name {
                color: #fff;
                font-weight: 500;
                padding-left: 15px;
                font-size: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .zan-num {
                color: #969696;
                background: url('../../../assets/pro/dianzanicon.svg') no-repeat;
                padding-left: 24px;
                font-size: 12px;
                background-position: left center;
            }

            .type-text {
                border: 1px solid #4B4B52;
                border-radius: 2px;
                color: #848393;
                font-size: 12px;
                padding: 0px 5px;
                line-height: 18px;
                white-space: nowrap;
                margin-left: 30px;
            }
        }

        .bot-author {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 15px;
            margin-top: 9px;
            padding-bottom: 14px;
            padding-right: 16px;

            .u {
                display: flex;
                align-items: center;

                .img-box {
                    width: 20px;
                    height: 20px;
                    border-radius: 20px;
                    overflow: hidden;
                    margin-right: 6px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .like-num {
                background: url('../../../assets/pro/icon_like2.svg') no-repeat;
                background-position: left center;
                background-size: 20px 20px;
                padding-left: 22px;
            }
        }
    }
}
</style>